<template>
	<!-- 寻人列表详情 -->
	<view class="content">
		<!-- 列表无数据 -->
		<view class="no-list" v-if="search_list.length == 0">
		  <view class="no-list-tips">
		    <image src="../../static/index/lp_2.png" ></image>
		    <view class="no-list-tips-title"> 还没有发布寻人信息，可点击下方按钮发布 </view>
		  </view>
		</view>
		<!-- 列表有数据 -->
		<scrollView height1="90vh" :isReloadComplete1="isReloadComplete" :isShowBottomView1="isShowBottomView" :isShowNodata1="isReloadComplete && !isNoData" @downdata="downdata" @updata="updata" @onScroll="onScroll" v-else>
		<view class="list-info">
			<view v-for="(item, index) in search_list" class="info-item" >
				<view @click="goto_next_page(item.id, item.status)" style="width: 100%;">
					<view class="info-item-title">{{ item.title }}</view>
					<view class="info-item-time">{{ item.insert_time }} 发起了寻人</view>
					<view class="info-item-addr">
					  <image src="../../static/index/dd.png"></image>
					  <text style="font-size: 20rpx">{{ item.address }}</text>
					</view>
					
					<view class="info-item-mid">
						<view class="mid-left">
						  <image :src="item.face_img" mode="aspectFill" v-if="item.face_img.indexOf('https') !== -1"> </image>
						  <image :src="vuex_api_HEADER + item.face_img" mode="aspectFill" v-else> </image>
						</view>
						<view class="mid-right">
						  <view class="rp">{{ item.describe }}</view>
						  <view class="rb" v-if="item.status == 2">
						    <text class="rb-status">进行中</text>
						    <view class="rb-time">{{ item.lost_time }}</view>
						  </view>
							
							<view class="rb" v-if="item.status == 3">
							  <text class="rb-status1">已找回</text>
							  <view class="rb-time1">用时{{ item.lost_time }}</view>
							</view>
							
							<view v-if="item.status == 0 || item.status == 1">
								<view v-if="item.status == 0" class="info-item-error" >审核中</view>
								<view v-else class="info-item-alter"><icon type="warn" size="13" style="margin-right: 8rpx;vertical-align: bottom;"/>信息有误，点此修改</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 寻找状态  2进行中  3已找回 -->
				<view class="info-item-data" v-if="item.status == 2 || item.status == 3">
				  <view style="padding-top: 10rpx;">
				  	<text class="data-icon">
				  	  <image src="../../static/index/gz_1.png"></image>
				  	  <text>{{ item.over_n }}</text>
				  	</text>
				  	<text class="data-icon">
				  	  <image src="../../static/index/pl_1.png"></image>
				  	  <text>{{ item.talk_n }}</text>
				  	</text>
				  	<text class="data-icon">
				  	  <image src="../../static/index/fx_1.png"></image>
				  	  <text>{{ item.share_n }}</text>
				  	</text>
				  </view>
				  <view :class="[item.status == 2 ? 'info-item-del' : 'info-item-del1']" @click="delete_mypublish(item.status, item.id, item.lost_lat, item.lost_lon, item.address)">
				    {{ item.status == 2 ? '解除寻找' : '删除' }}
				    <u-modal v-model="show_model" :content="show_content" show-cancel-button @confirm="sure_to_del()"></u-modal>
				  </view>
					
				</view>
				<view class="info-item-type">
					<image src="../../static/index/zjx.png"></image>
					<text>{{ item.lost_type == 0 ? '找亲人' : '帮忙找' }}</text>
				</view>
			</view>
		</view>
		<selfRoll :active="roll" :left="right" @scrollTo="scrollTo"></selfRoll>
		</scrollView>
		<!-- 点击发布寻人按钮 -->
		<view class="make-button" @click="make_search_info">
		  发布寻人信息
		</view>
	</view>
</template>
<script>
	import scrollView from '../../components/scroll-view/scroll-view.vue';
	import selfRoll from '../../components/self-roll/roll.vue';
	
	export default {
		components: {
			scrollView,
			selfRoll
		},
		data() {
			return {
				// 寻人列表
				search_list: [],
				show_model: false,
				show_content: '确定要删除吗?',
				// 家人列表
				familyList: [],
				del_id: 0,
				page: 1,
				size: 10,
				isReloadComplete: false,
				isNoData: true,
				roll: false, //返回顶部
				right: '80vw', //右侧距离
				systemHeight: 0, //系统高度
				isShowBottomView: false,
				page_count: 0
			}
		},
		onLoad() {
			this.get_my_search_info();
			this.systemHeight = this.getSystemMsg('windowHeight');
		},
		onShow() {
			this.get_my_search_info();
		},
		methods: {
			// 发布寻人信息
			make_search_info() {
			  uni.navigateTo({
			    url: '/pages/make/make'
			  })
			},
			// 获取寻人列表
			get_my_search_info() {
				this.iserror = true;
				this.$u.api.get_firstpage_lookfor_list({
					type: 1, //1我的寻人
					page: this.page,
					psize: this.size
				}).then((res) => {
					if(res.code == 200) {
						if(this.page === 1) {
							// 首次加载
							this.search_list = res.data.data;
							this.page_count = res.data.page_count;
						} else {
							this.search_list.push(...res.data.data)
						}
						this.iserror = false;
					} else {
						this.iserror = false;
					}
				})
			},
			// 查看某信息的详情
			goto_next_page(id, status) {
			  if (status == 1) {
			    uni.navigateTo({
			      url: `./make?id=${id}`
			    })
			    return
			  }
			  uni.navigateTo({
			    url: `../detail/detail?id=${id}&status=${status}`
			  })
			},
			// 删除已发布的寻人信息
			delete_mypublish(status, id, lat, lon, address) {
			  // 2进行中 3找回
			  if (status == 2) {
			    let data = {
			      id: id,
			      lat: lat,
			      lon: lon,
						address
			    }
			    uni.navigateTo({
			      url: `../release/release?data=${JSON.stringify(data)}`
			    })
			  } else {
			    // 已找回
			    this.del_id = id
			    this.show_model = true
			  }
			},
			// 点击模态框确认删除
			sure_to_del() {
			  let self = this
			  this.$u.api
			    .user_delete_lookfor_info({
			      id: this.del_id
			    })
			    .then((res) => {
			      if (res.code == 200) {
			        uni.showToast({
			          title: '删除成功'
			        })
			        self.get_my_search_info()
			      } else {
			        uni.showToast({
			          title: '网络不好,请稍后重试'
			        })
			      }
			    })
			},
			// 下拉刷新
			downdata() {
				let self = this;
				self.isShowBottomView = false;
				setTimeout(() => {
					uni.$emit('downdataHD', {
						type: 'down'
					});
					self.page = 1;
					self.search_list = [];
					self.isReloadComplete = false;
					self.isNoData = true;
					self.get_my_search_info();
				}, 1000)
			},
			// 上拉加载
			updata() {
				let self = this;
				self.isShowBottomView = true;
				if(self.page < self.page_count) {
					self.page++;
				} else {
					self.isReloadComplete = true;
					self.isNoData = false;
					uni.$emit('updataHD', {
						type: 'up'
					});
					self.isShowBottomView = false;
					return 
				}
				self.get_my_search_info();
				this.isShowBottomView = false;
			},
			// 页面滚动
			onScroll(e) {
				if (e.scrollTop > this.systemHeight) {
					this.roll = true;
				} else {
					this.roll = false;
				}
			},
			/*scrollview返回远点*/
			scrollTo() {
				uni.$emit('goTop', '');
			},
			//获取系统参数
			getSystemMsg: function(key) {
				var result = '';
				uni.getSystemInfo({
					success: (res) => {
						if (key === 'windowHeight') {
							result = res.windowHeight;
						}
					}
				});
				return result;
			},
		}
	}
</script>
<style lang="scss" scoped>
	.no-list {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-top: 30rpx;
		.no-list-tips {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 93%;
			height: 135rpx;
			box-shadow: 0 0 5rpx #a9a9a9;
			border-radius: 5rpx;
			image {
				width: 100rpx;
				height: 100rpx;
			}
			.no-list-tips-title {
				margin-left: 30rpx;
				font-weight: 430;
			}
		}
	}
	.make-button {
		position: fixed;
		bottom: 10rpx;
		width: 70vw;
		left: 15vw;
		height: 100rpx;
		background-color: #6de3e6;
		text-align: center;
		line-height: 100rpx;
		border-radius: 50rpx;
		color: #ffffff;
		font-size: 30rpx;
	}
	.list-info {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		padding-top: 10rpx;
	}
	.info-item {
		position: relative;
		width: 93%;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 10rpx 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		box-shadow: 2rpx 4rpx 10rpx #a9a9a9;
		margin-bottom: 20rpx;
		.info-item-title {
			margin: 0 0 10rpx 0;
			font-weight: 700;
			width: calc(93% - 133rpx);
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.info-item-time {
			font-size: 20rpx;
			color:#ccc;
			text-align: right;
			width: 100%;
		}
		.info-item-addr {
			height: 40rpx;
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			margin-top: 10rpx;
			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
		.info-item-mid {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			width: 100%;
			margin-top: 10rpx;
			border: 1px solid #eeeeee;
			width: 100%;
			border-radius: 20rpx;
			overflow: hidden;
			.mid-left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-right: 30rpx;
				image {
					width: 140rpx;
					height: 140rpx;
					vertical-align: top;
				}
			}
			.mid-right {
				.rp {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					margin-bottom: 20rpx;
					padding-right: 10rpx;
					font-size: 24rpx;
				}
				.rb {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					color: #FFFFFF;
					.rb-status {
						background-color: #ff871d;
						text-align: center;
						padding: 10rpx 26rpx;
						font-size: 20rpx;
						
					}
					.rb-time {
						background-color: #46DDA2;
						padding: 10rpx 26rpx;
						font-size: 20rpx;
					}
					.rb-status1 {
						background-color: #69DDE8 ;
						text-align: center;
						padding: 10rpx 26rpx;
						font-size: 20rpx;
					}
					.rb-time1 {
						background-color: #F4F4F4;
						padding: 10rpx 26rpx;
						font-size: 20rpx;
						color: #9E9E9E;;
					}
				}
			}
		}
		.info-item-error {
			display: inline-block;
			font-size: 20rpx;
			padding: 6rpx 30rpx ;
			background-color: #FF0000;
			color: #FFFFFF;
		}
		.info-item-alter {
			display: inline-block;
			font-size: 20rpx;
			border: 2rpx solid #FF0000;
			padding: 6rpx 30rpx ;
			color: #FF0000;
		}
		.info-item-del {
			float: right;
			height: 100%;
			background-color: #1b7afc;
			text-align: center;
			border-radius: 4rpx;
			padding: 8rpx 16rpx;
			color: #FFFFFF;
		}
		.info-item-del1 {
			float: right;
			height: 100%;
			background-color:  #8F8F8F;
			text-align: center;
			border-radius: 4rpx;
			padding: 8rpx 16rpx;
			color: #FFFFFF;
		}
		.info-item-data {
			display: flex;
			justify-content: space-between;
			width: 100%;
			border-bottom-left-radius: 10rpx;
			border-bottom-right-radius: 10rpx;
			padding-top: 10rpx;
			font-size: 20rpx;
			.data-icon {
				image {
					width: 25rpx;
					height: 30rpx;
					margin: 0 6rpx;
					vertical-align:middle;
				}
			}
		}
		.info-item-type {
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			height: 55rpx;
			width: auto;
			background-color: #ffeef0;
			// padding: 0 10rpx;
			width: 133rpx;
			height: 55rpx;
			border-bottom-left-radius: 10rpx;
			image {
				width: 24rpx;
				height: 24rpx;
			}
			text {
				color: #ff5b76;
				font-weight: 500;
			}
		}
	}
</style>